<!--检查预约登记-->
<template>
  <el-dialog title="预约情况查询" z-index="1500" :visible.sync="visible" width="844px" :before-close="handleClose" :destroy-on-close="true" class="apply_his_dialog">
    <div class="his_container">
      <div
        v-loading="loading"
      >
        <div class="his_cont">
          <div class="apply_form flex flex-row justify-start align-center">
            <el-select
              size="mini"
              v-model="formdata.depArea"
              clearable
              placeholder="影像区域"
              style="width: 120px;"
              @change="depAreaChange"
            >
              <el-option
                v-for="(item, index) in depAreaOptions"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-select
              class="mar-l-5"
              size="mini"
              v-model="formdata.dep"
              placeholder="检查部门"
              @change="handleDepChange"
              clearable
              style="width: 150px;"
            >
              <el-option
                v-for="(item, index) in depOptions"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-select
              class="mar-l-5"
              size="mini"
              v-model="formdata.modalitytype"
              clearable
              placeholder="设备类型"
              style="width: 120px;"
              @change="modalitytypeChange"
            >
              <el-option
                v-for="(item, index) in modalitytypeOptions"
                :key="index"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
            <el-date-picker
              class="mar-l-5"
              style="width: 160px;"
              type="date"
              size="mini"
              placeholder="选择日期"
              v-model="formdata.appointmentDate"
              @change="changeAppointmentDate">
            </el-date-picker>
            <el-button class="mar-l-5" type="primary" size="mini" @click="search" icon="el-icon-search" style="width: 70px;">查询</el-button>
          </div>
          <div class="his_table">
            <el-table
              ref="tableRef"
              :data="tableList"
              border
              style="width: 100%"
              class="ky-table"
            >
              <el-table-column
                v-for="(cc, index) in tableColumns"
                :key="index"
                :prop="cc.prop"
                :label="cc.label"
                align="center"
                :width="cc.width"
                show-overflow-tooltip>
                <template slot-scope="scope">
                  <span :class="[{'red': cc.prop == 'unCheckNum'}]">{{scope.row[cc.prop]}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 病历信息 -->
        <!-- <applyMRITable ref="applymriState"></applyMRITable> -->
      </div>
    </div>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import { setLocalStorage, getLocalStorage } from '@/utils/localStorage' // removeLocalStorage
import { getKyReaderCardOptions, getDateYMD, isNull, getQueryWayByText } from '@/utils/utils'
import { getDepAreaList, getDepList, getModalityTypeList, getpartstatistics } from '@/api/api'
import { dateFormatter } from '@/utils/validate'
import enc from '@/utils/aes'
// import { getModalityTypeListFunc, getDepAreaListFunc } from '@/api/common'
import { Options } from '@/utils/constant'
import bus from '@/api/bus'
// import virtualTableJs from '@/mixin/virtualTable'
// import applyFunction from '@/mixin/applyFunction'
// import { mapGetters } from 'vuex'
const CHECK_FORM_DEFAULT_KEY = 'CHECK_FORM_DEFAULT'
export default {
  components: {
    // applyMRITable
  },
  // mixins: [applyFunction],
  props: {
    checkUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      localSetMemory: JSON.parse(getLocalStorage('localSetMemory') || `{"modalitytype":"","depArea":"","areaName":"","dep":"","deps":[]}`),
      tableList: [],
      everySum: {},
      visible: false,
      loading: false,
      hospitalCode: this.$store.state.user.hospitalCode,
      tableData: [],
      formdata: {
        appointmentDate: getDateYMD(new Date().getTime()),
        dep: '', // 检查部门
        depArea: '', // 院区过滤
        modalitytype: '' // 设备类型过滤
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }]
      },
      depAreaOptions: [], // 院区
      modalitytypeOptions: [], // 设备类型
      depOptions: [], // 部门列表
      // 列表配置
      tableColumns: [
        {
          label: '部位',
          width: '200',
          prop: 'registerpart',
          show: true,
          sort: 0
        },
        {
          label: '上午',
          width: '110',
          prop: 'checkClassNum1',
          show: true,
          sort: 1
        },
        {
          label: '下午',
          width: '110',
          prop: 'checkClassNum2',
          show: true,
          sort: 2
        },
        {
          label: '其他',
          width: '110',
          prop: 'checkClassNum3',
          show: true,
          sort: 3
        },
        {
          label: '未检',
          width: '110',
          prop: 'unCheckNum',
          show: true,
          sort: 4
        },
        {
          label: '总',
          prop: 'totalNum', // visitNumber medicalRecordNo
          show: true,
          sort: 5
        }
      ]
    }
  },
  computed: {
    // ...mapGetters(['depAreaOptions']),
    // config配置
    appConfig() {
      return this.$store.state.settings.appConfig
    }
  },
  watch: {},
  async created() {

  },
  async mounted() {
    // const beginTime = new Date().getTime()
    // console.log('111111', beginTime)
    // Promise.all([this.getDepAreaList(), this.getDepList(), this.getModalityTypeList()]).then(data => {
    //   const endTime = new Date().getTime()
    //   console.log('222222', endTime - beginTime)
    //   // 获取列表数据
    //   this.search()
    // })
    const beginTime = new Date().getTime()
    // console.log('111111', beginTime)
    await this.getDepAreaList()
    // console.log('222222')
    // await this.getDepList()
    // console.log('333333')
    // await this.getModalityTypeList()
    const endTime = new Date().getTime()
    // console.log('444444', endTime - beginTime)
    // 获取列表数据
    this.search()
  },
  beforeDestroy() {
    // console.log('beforeDestroy')
  },
  methods: {
    search() {
      let params = {
        HospitalCode: this.hospitalCode,
        DepArea: this.formdata.depArea,
        Dep: this.formdata.dep,
        Modality: this.formdata.modalitytype,
        AppointmentDate: this.formdata.appointmentDate
      }
      // console.log('into search')
      getpartstatistics(params).then(res => {
        // console.log('res', res)
        this.everySum = {
          checkClassNum1: 0,
          checkClassNum2: 0,
          unCheckNum: 0,
          checkClassNum3: 0,
          totalNum: 0,
          registerpart: '合计'
        }
        if (res.code === 10000) {
          this.tableList = res.content.list
          if (this.tableList.length > 0) {
            this.tableList.forEach(element => {
              this.everySum.checkClassNum1 = this.everySum.checkClassNum1 + element.checkClassNum1
              this.everySum.checkClassNum2 = this.everySum.checkClassNum2 + element.checkClassNum2
              this.everySum.checkClassNum3 = this.everySum.checkClassNum3 + element.checkClassNum3
              this.everySum.unCheckNum = this.everySum.unCheckNum + element.unCheckNum
              this.everySum.totalNum = this.everySum.totalNum + element.totalNum
            })
            this.tableList.push(this.everySum)
          }
        }
      })
    },
    handleDepChange(e) {
      this.formdata.modalitytype = ''
      this.getModalityTypeList()
    },
    depAreaChange(e) {
      this.formdata.dep = ''
      this.getDepList()
    },
    modalitytypeChange(e) {
      console.log('modalitytypeChange=>e', e)
    },
    changeAppointmentDate(e) {
      console.log('changeAppointmentDate=>e', e)
      this.formdata.appointmentDate = getDateYMD(new Date(e).getTime())
      console.log(this.formdata.appointmentDate)
    },
    handleClose() {
      this.visible = false
      this.$emit('close')
    },
    async open() {
      this.visible = true
    },
    // 获取影像区域列表
    async getDepAreaList() {
      let params = { HospitalCode: this.hospitalCode }
      console.log('getDepAreaList=>params', params)
      return new Promise(async resolve => {
        getDepAreaList(params).then(async res => {
          console.log('getDepAreaList')
          this.depAreaOptions = res.content.list
          if (this.localSetMemory && this.localSetMemory.depArea && this.depAreaOptions.includes(this.localSetMemory.depArea)) {
            this.formdata.depArea = this.localSetMemory.depArea
          } else {
            this.formdata.depArea = this.depAreaOptions[0]
          }
          await this.getDepList()
          resolve(res.content.list)
        })
      })
    },
    async getDepList() {
      const params = { HospitalCode: this.hospitalCode }
      if (this.formdata.depArea) {
        params.DepArea = this.formdata.depArea
      }
      return new Promise(async resolve => {
        getDepList(params).then(async res => {
          // console.log('getDepList')
          this.depOptions = res.content.list
          if (this.localSetMemory && this.localSetMemory.dep && this.depOptions.includes(this.localSetMemory.dep)) {
            this.formdata.dep = this.localSetMemory.dep
          } else if (this.localSetMemory && !isNull(this.localSetMemory.deps) && this.depOptions.includes(this.localSetMemory.deps[0])) {
            this.formdata.dep = this.localSetMemory.deps[0]
          } else {
            this.formdata.dep = this.depOptions[0]
          }
          await this.getModalityTypeList()
          resolve(res.content.list)
        })
      })
    },
    async getModalityTypeList() {
      let params = {
        HospitalCode: this.hospitalCode
      }
      if (this.formdata.dep) {
        params.dep = this.formdata.dep
      }
      return new Promise(async resolve => {
        getModalityTypeList(params).then(async res => {
          console.log('getModalityTypeList')
          this.modalitytypeOptions = res.content.list
          if (this.localSetMemory && this.localSetMemory.modalitytype && this.modalitytypeOptions.includes(this.localSetMemory.modalitytype)) {
            this.formdata.modalitytype = this.localSetMemory.modalitytype
          } else {
            // 设备类型默认为空
            // this.formdata.modalitytype = this.modalitytypeOptions[0]
          }
          resolve(res.content.list)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$primaryColor: #00A4E9;
$tableThBgColor: #eff6fe;
$warningColor: #ff7600;
$tableSlectedBgColor: #ffe3cc;
$tableDangerColor: #f00;
.apply_form {
  margin-left: 10px;
  margin-top: 6px;
}
/deep/ .el-button--primary{
  background-color: $warningColor;
  border-color: $warningColor;
}
.his_container{
  margin-top: -20px;
  background-color: #f5f6fa;
  h1{
    margin: 0;
  }
  /deep/ .el-table__body tr.current-row>td{
    background-color: $warningColor;
    color: #fff;
  }
  /deep/ .ky-table th{
    background-color: $tableThBgColor;
    color: #333;
    font-weight: 500;
  }
  /deep/ .el-table__body tr.select-row>td {
    background: $tableSlectedBgColor;
  }
  /deep/ .el-table__body tr.danger-row>td {
    color: $tableDangerColor;
  }
}
.his_table{
  padding:10px 10px 15px;
}
.grid_tit{
  padding: 10px 0;
  font-size: 15px;
  color: #333;
  .tips{
    font-size: 12px;
    color: #999;
  }
  .grid_tit_ckb{
    display: inline-block;
    margin-left: 4px;
    /deep/ .el-checkbox{
      margin-right: 6px;
    }
  }
}
.his_cont{
  padding-bottom: 10px;
  /deep/ .el-radio__label{
    padding-left: 5px;
    font-size: 12px;
  }
  /deep/ .el-radio__input.is-checked+.el-radio__label{
    color: $warningColor;
  }
  /deep/ .el-radio__input .el-radio__inner:hover{
    border-color:  $warningColor;
  }
  /deep/ .el-radio__input.is-checked .el-radio__inner{
    border-color:  $warningColor;
    background:  $warningColor;
  }
  /deep/ .el-table__body-wrapper {
    height: 300px;
    overflow-y: auto;
  }
  /deep/ .el-table td,/deep/ .el-table th{
    padding: 4px 0;
  }
}
// @media screen and (max-width: 1280px) {
//   .his_cont /deep/ .el-table__body-wrapper{
//     height: 200px;
//   }
// }

.his_cont .ky-table /deep/ .el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
/deep/ .el-tag--dark.el-tag--danger {
  background: #f5534f;
  border-color: #f5534f;
  vertical-align: 2px;
}
.fc_red2 {
  background: #f5534f !important;
}
.apply_his_dialog /deep/ .el-dialog{
  background-color: #f5f6fa;
}
/deep/ .el-dialog__headerbtn{
  top:10px
}
// /deep/ .el-dialog__header {
//   padding: 10px 20px 10px;
// }
/deep/ .el-dialog__body{
  padding: 10px 10px 0;
}
.apply_his_dialog .el-form-item__label {
  font-size: 13px;
  color: #606266;
  line-height: 30px;
  font-weight: 400;
}
.mine-time-box /deep/ .el-input__prefix{
  left: 0;
  line-height: 28px;
  .el-input-group__prepend{
    line-height: 28px;
  }
}
</style>
